// 生成随机数据
const studentsNum = 24;
window.studentNames = [
    "陈浩然", "周宇澄", "王俊杰", "韩子墨", "赵思远", "刘子轩", "黄梓晨", "李明哲", "吴雨泽", "孙启铭",
    "郑博文", "钱嘉豪", "冯子墨", "陈思成", "董宇航", "蒋宇恒", "张伟豪", "唐靖宇", "蔡明辉", "潘星辰",
    "袁伟泽", "于昊然", "叶明远", "宋子豪", "许浩然", "邓志远", "曹雨晨", "曾俊杰", "彭子骞",
    "李强", "王军", 
    // "赵亮", "陈明", "董浩", "蒋伟",
    // "李若萱", "张敏"
];
let aScore = [85, 72, 83, 68, 80, 77, 91, 65, 88, 74, 96, 63, 82, 79, 94, 66, 86, 71, 90, 67, 83, 76, 92, 69, 81, 75, 95, 64, 87, 73, 97];
let bScore = [12, 14, 5, 20, 11, 11, 4, 34, 10, 14, 2, 26, 15, 18, 3, 22, 13, 27, 8, 31, 14, 22, 5, 16, 16, 23, 1, 35, 9, 26, 0];
const generateScores = () => {
    const students = [];
    for (let i = 1; i <= studentsNum; i++) {
        // const a = Math.floor(Math.random() * 41) + 60; // 60-100的基础分
        // const b = Math.floor(Math.random() * (100 - a + 1)); // 0~(100-a)的附加分
        students.push({
            name: studentNames[i-1],
            a: aScore[i-1],
            b: bScore[i-1],
            total: aScore[i-1]+bScore[i-1]
        });
    }
    return students;
};

// 获取数据
const scoreData = generateScores();

// 配置柱状图
document.addEventListener('DOMContentLoaded', () => {
    initChart('progressChart', {
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' },
            formatter: params => {
                const a = params[0].value;
                const b = params[1].value;
                return `${params[0].name}<br/>
                        基础分：${a}分<br/>
                        附加分：${b}分<br/>
                        总分：${a + b}分`;
            }
        },
        xAxis: {
            type: 'category',
            data: scoreData.map(item => item.name),
            axisLabel: { color: '#fff', rotate: 45 }
        },
        yAxis: {
            type: 'value',
            max: 100,
            axisLabel: { color: '#fff' }
        },
        series: [
            {
                name: '基础分',
                type: 'bar',
                stack: 'score',
                data: scoreData.map(item => item.a),
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#00b4d8' },
                        { offset: 1, color: '#0077b6' }
                    ])
                }
            },
            {
                name: '附加分',
                type: 'bar',
                stack: 'score',
                data: scoreData.map(item => item.b),
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#32CD32' },
                        { offset: 1, color: '#228B22' }
                    ])
                }
            }
        ],
        grid: {
            containLabel: true,
            left: '3%',
            right: '3%',
            bottom: '15%'
        }
    });

    // const modal = document.getElementById('progressDetailModal');
    // modal.style.display = 'block';
    


    // modal.style.display = 'none';

    // 关闭模态框
    document.querySelector('#progressDetailModal .close').addEventListener('click', function(e) {
        e.stopPropagation(); // 阻止事件冒泡
        document.getElementById('progressDetailModal').style.display = 'none';
    });

    // 点击div能展示
    document.getElementById('progressChart').addEventListener('click', () => {
        document.getElementById('progressDetailModal').style.display = 'block';
        // 初始化饼图（示例数据）
        initPieChart('pieChart1', '装备原理补差统计', ['雷达功能结构', '雷达战技指标', '雷达工作过程', '雷达工作原理'], [10, 20, 25, 15]);
        initPieChart('pieChart2', '装备操作补差统计', ['雷达开关机', '典型参数测量', '监控界面操作', '终端界面操作'], [5, 25, 10, 13]);
        initPieChart('pieChart3', '装备运用补差统计', ['雷达架设撤收', '工作状态评估', '组织维护检修', '雷达优化运用'], [20, 23, 13, 19]);
        initPieChart('pieChart4', '装备作战补差统计', ['战场应急处置', '机动部署作战', '区域协同抗扰', '组网协同探测'], [23, 20, 17, 21]);
        
        // 初始化柱状图
        initBarChart('barChart1', '阶段一考核', [11, 3, 5, 5, 0]);
        initBarChart('barChart2', '阶段二考核', [11, 4, 4, 5, 0]);
        initBarChart('barChart3', '综合实践考核', [13, 8, 1, 2, 0]);
        
        // 初始化雷达图
        initRadarChart('radarChart');
        
        // 初始化底部进度图（复用原始图表配置）
        initDetailProgressChart();
    });
});



// 初始化饼图函数
function initPieChart(containerId, title, name, value) {
    const chart = echarts.init(document.getElementById(containerId));
    chart.setOption({
        title: {
            text: title,
            left: 'center',
            textStyle: { color: '#90e0ef', fontSize: 14 }
        },
        tooltip: { trigger: 'item' },
        series: [{
            type: 'pie',
            radius: '70%',
            data: [
                { value: value[0], name: name[0] },
                { value: value[1], name: name[1] },
                { value: value[2], name: name[2] },
                { value: value[2], name: name[3] },
            ],
            itemStyle: {
                borderRadius: 10,
                borderColor: '#002855',
                borderWidth: 2
            },
            emphasis: {
                itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    });
}

// 初始化柱状图函数
function initBarChart(containerId, title, value) {
    const chart = echarts.init(document.getElementById(containerId));
    chart.setOption({
        title: {
            text: title,
            left: 'center',
            textStyle: { color: '#90e0ef', fontSize: 14 }
        },
        xAxis: {
            type: 'category',
            data: ['优', '良', '中', '及格', '不及格'],
            axisLabel: { color: '#fff', rotate: 0 }
        },
        yAxis: { type: 'value', axisLabel: { color: '#fff' } },
        series: [{
            type: 'bar',
            data: value,
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#00b4d8' },
                    { offset: 1, color: '#0077b6' }
                ])
            }
        }]
    });
}

// 初始化雷达图函数
function initRadarChart(containerId) {
    const chart = echarts.init(document.getElementById(containerId));
    chart.setOption({
        title: {
            text: '目标达成分析图',
            left: 'center',
            textStyle: { color: '#90e0ef', fontSize: 14 }
        },
        radar: {
            indicator: [
                { name: '目标识别', max: 100 },
                { name: '信号处理', max: 100 },
                { name: '系统操作', max: 100 },
                { name: '故障诊断', max: 100 },
                { name: '数据分析', max: 100 },
                { name: '战术应用', max: 100 },
                { name: '设备维护', max: 100 },
                { name: '协同作战', max: 100 },
                { name: '应急处理', max: 100 }
            ],
            radius: '65%',
            axisName: { color: '#fff' }
        },
        series: [{
            type: 'radar',
            data: [{
                value: [85, 72, 93, 68, 80, 77, 91, 65, 88],
                name: '当前能力',
                areaStyle: {
                    color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                        { offset: 0, color: 'rgba(0, 180, 216, 0.5)' },
                        { offset: 1, color: 'rgba(0, 119, 182, 0.2)' }
                    ])
                },
                lineStyle: { width: 2 }
            }]
        }]
    });
}

// 初始化详细进度图
function initDetailProgressChart() {
    // 复用原始progressChart的配置
    const chart = echarts.init(document.getElementById('detailProgressChart'));
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' },
            formatter: params => {
                const a = params[0].value;
                const b = params[1].value;
                return `${params[0].name}<br/>
                        基础分：${a}分<br/>
                        附加分：${b}分<br/>
                        总分：${a + b}分`;
            }
        },
        xAxis: {
            type: 'category',
            data: scoreData.map(item => item.name),
            axisLabel: { color: '#fff', rotate: 45 }
        },
        yAxis: {
            type: 'value',
            max: 100,
            axisLabel: { color: '#fff' }
        },
        series: [
            {
                name: '基础分',
                type: 'bar',
                stack: 'score',
                data: scoreData.map(item => item.a),
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#00b4d8' },
                        { offset: 1, color: '#0077b6' }
                    ])
                }
            },
            {
                name: '附加分',
                type: 'bar',
                stack: 'score',
                data: scoreData.map(item => item.b),
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#32CD32' },
                        { offset: 1, color: '#228B22' }
                    ])
                }
            }
        ],
        grid: {
            containLabel: true,
            left: '3%',
            right: '3%',
            bottom: '15%'
        }
    };
    chart.setOption(option);
}